<template>
    <IndependenceForm ref="dialogSubmitForm" class="add-region-relation" v-bind="addRegionForm"></IndependenceForm>
</template>
<script>
import IndependenceForm from '@/components/SubmitForm/IndependenceForm.vue'
import { addRegion, getRegionByPid } from '@/api/base/region.js'
import Enums from './enums.js'
import { SAVE_SUCCESS } from './consts.js'
export default {
    components: {
        IndependenceForm
    },
    emits: [SAVE_SUCCESS],
    data() {
        return {
            addRegionForm: {
                title: '新增绑定',
                width: '450px',
                submitFormFrame: [
                    {
                        colon: false,
                        items: [
                            {
                                label: '机构',
                                key: 'regionType',
                                options: Enums.REGION_TYPE,
                                placeholder: '请选择',
                                frameType: 'select',
                                change: this.regionChange,
                                validations: {
                                    required: true
                                }
                            },
                            {
                                label: '机构区域名称',
                                key: 'shopRegionName',
                                frameType: 'input',
                                validations: [{ required: true, message: '机构区域名称不能为空', trigger: 'blur' }]
                            },
                            {
                                label: '机构地区代码',
                                key: 'regionCode',
                                frameType: 'input',
                                visible: false,
                                validations: {
                                    required: false,
                                    max: 15
                                }
                            },
                            {
                                label: '绑定区域',
                                key: 'regionInfo',
                                placeholder: '请选择',
                                frameType: 'dynamicCascader',
                                popperClass: 'regionInfo-dynamicCascader',
                                options: {
                                    searchFun: this.getRegion
                                },
                                validations: {
                                    required: true
                                }
                            }
                        ]
                    }
                ],

                submitFun: this.addRegionFun,
                labelWidth: '100px'
            }
        }
    },
    methods: {
        addRegionFun(data) {
            let arr = data.regionInfo
            data.provinceRid = arr[0]
            data.cityRid = arr[1]
            data.districtRid = arr[2]
            return addRegion(data).then((res) => {
                this.$message.success('保存成功')
                this.$refs.dialogSubmitForm.cancelFun()
            })
        },
        regionChange(val) {
            let regionCode = this.addRegionForm.submitFormFrame[0].items.find((v) => v.key == 'regionCode')
            if (val == 2) {
                regionCode.visible = true
                regionCode.validations.required = true
            } else {
                regionCode.validations.required = false
                regionCode.visible = false
            }
        },
        getRegion(pid) {
            return getRegionByPid({ pid })
        }
    }
}
</script>
<style lang="scss">
.regionInfo-dynamicCascader .el-cascader-menu__wrap {
    height: 350px !important;
}
</style>
